<template>
    <link rel="stylesheet" href="/assets/css/indent-details.css"/>
    <van-nav-bar
        title="订单详情"
        left-text="返回"
        left-arrow
        @click-left="back"
    />

    <div class="near-box">
        <div class="jd-qrdd-bigbox">
            <!--商品地址管理部分-->
            <div class="indent-details-box" @click="express(order.id)">
                <span class="indent-details-img1"></span>
                <span class="indent-details-text1">{{order.status_text}}</span>
                <span class="indent-details-text2">
                    <p class="express" v-if="order.status == 0">请尽快支付订单</p>
                    <p class="express" v-if="order.status == 1">未发货，请耐心等待</p>
                    <p class="express" v-if="order.status == 2">
                        <p>物流公司：{{ order.express.name }}</p>
                        <p>物流单号：{{ order.expresscode }}</p>
                    </p>
                    <p v-if="order.status == 3">签收人:{{ order.address.consignee }}</p>
                    <p v-if="order.status == 3">感谢使用{{order.express.name}}，期待再次为您服务！</p>
                    <p v-if="order.status == -2">申请退款原因：{{ order.refundreason }}</p>
                    <p v-if="order.status == -3">退货成功，等待商家售后</p>
                    <p v-if="order.status == -4">退款成功，费用原路返回您的账户</p>
                    <p v-if="order.status == -5">退货失败,退货失败原因为{{ order.examinereason }}</p>
                </span>
                <span class="indent-details-text3">{{ order.createtime_text }}</span>
            </div>
            <!--地址部分-->
            <div class="jd-qrdd-a1">
                <span class="qrdd-a1-t1">{{consignee}}</span>
                <span class="qrdd-a1-t1">{{ mobile }}</span>
                <van-tag type="warning" v-if="status == 1">默认</van-tag>
                <!-- <span class="qrdd-a1-t2">默认</span> -->
                <div class="qrdd-a1-b1">
                    <span class="qrdd-a1-img1"></span>
                    <span class="qrdd-a1-t3">{{ address }}</span>
                </div>
                <span class="qrdd-a1-img2"></span>
            </div>
            <!--商品部分-->
            <div class="zjzz-buylist-goods1">
                <div class="zjzz-buylist-gtime">
                    <span class="zjzz-buylist-gtime1"><i class="indent-details-img2"></i>家居商城</span>
                    <!-- <span class="zjzz-buylist-gtime2">联系客服</span> -->
                </div>
                <div class="zjzz-buylist-det" v-for="item in products">
                    <van-card
                        :num="item.pronum"
                        :price="item.price"
                        :title="item.products.name"
                        :thumb="item.products.thumbs_text"
                        />
                </div>
            </div>
            <!--商品金额部分-->
            <div class="indent-details-box2">
                <span class="indent-details-text4">应付总额</span>
                <span class="indent-details-text5">￥{{order.amount}}</span>
            </div>
            <div class="indent-details-box2">
                <span class="indent-details-text4 tcolor-grey">商品总价</span>
                <span class="indent-details-text5 tcolor-black">￥{{ order.amount }}</span>
            </div>
            <div class="indent-details-box2">
                <span class="indent-details-text4 tcolor-grey">运费</span>
                <span class="indent-details-text5 tcolor-black">￥0.00</span>
            </div>
            <div class="indent-details-box2">
                <span class="indent-details-text4 tcolor-grey">税费</span>
                <span class="indent-details-text5 tcolor-black">￥0.00</span>
            </div>
            <div class="indent-details-box2">
                <span class="indent-details-text4 tcolor-grey">发票信息</span>
                <span class="indent-details-text5 tcolor-black">不需要发票</span>
            </div>
            <!--订单编号部分-->
            <div class="indent-details-box3">
                <p>订单编号:{{order.code}}</p>
                <p>支付方式:支付宝</p>
                <p>支付交易单号:201711024866544846144</p>
                <p>下单时间:{{ order.createtime_text }}</p>
            </div>
        </div>
    </div>
</template>

<script setup>
    import {getCurrentInstance} from 'vue'  
    const {proxy}  = getCurrentInstance()

    var business = reactive(proxy.$cookies.get('business'));
    let orderid = proxy.$route.query.hasOwnProperty('orderid') ? proxy.$route.query.orderid : 0
    orderid = ref(orderid)
    let order = ref({})
    let mobile = ref('')
    let address = ref('')
    let products = ref({})
    let consignee = ref('')
    let status = ref('')

    onBeforeMount(() => {
        OrderInfo()
    })

    const back = () => {
        proxy.$router.go(-1)
        return false
    }

    function getTel(tel){
        var reg = /^(\d{3})\d{4}(\d{4})$/;  
        return tel.replace(reg, "$1****$2");
    }

    // 接口请求订单信息
    let OrderInfo = async () => {
        // 封装数据
        var data = {
            busid: business.id,
            orderid: orderid.value
        }

        var result = await proxy.$POST({
            url: '/order/info',
            params: data
        })

        if(result.code == 0){
            proxy.$fail(result.msg) 
            return false
        }

        order.value = result.data[0]
        mobile.value = result.data[0].address.mobile
        mobile.value = getTel(mobile.value)
        address.value = result.data[0].address.region_text + result.data[0].address.address
        products.value = result.data.products
        consignee.value = result.data[0].address.consignee
        status.value = result.data[0].address.status
        // console.log(products);
    }

    // 查看物流
    let express = orderid => {
        proxy.$router.push({
            path: '/order/express',
            query: {orderid: orderid}
        })
    }
    
    
</script>   

<style>
    .near-box .jd-qrdd-bigbox .jd-qrdd-a1 .van-tag{
        margin-left: 10px;
    }
    .van-card{
        background: #ffffff
    }
</style>